<template>
  <div class="container  report-cj">
    <div class="img-bg clearfix">
      <div class="main clearfix">
        <!--页头-->
        <div class="m-title text-center">
          <img src="http://kidtts.tmooc.cn/script/css/rep/img/t_week.png">
          <img src="http://kidtts.tmooc.cn/script/css/rep/img/t_month.png">
        </div>
        <!--老师评语-->
        <div class="md180411-cj-item" v-if="false">
          <div class="title">
            <img src="http://kidtts.tmooc.cn/script/css/rep/img/m_t01.png">
          </div>
          <div class="content">
            <!-- 评语 -->
            <p class="comment">lorem</p>
          </div>
        </div>
        <!--四次课知识点-->
        <div class="md180411-cj-item">
          <div class="title">
            <img src="http://kidtts.tmooc.cn/script/css/rep/img/m_t02.png">
          </div>
          <!-- 知识点 -->
          <div class="content">
            <ul class="md180411-cj-info">
              <li class="item clearfix">
                <span class="pull-left point">1</span>
                <p class="font-16 cont">键盘响应事件及其应用</p>
              </li>
              <li class="item clearfix">
                <span class="pull-left point">2</span>
                <p class="font-16 cont">键码值</p>
              </li>
              <li class="item clearfix">
                <span class="pull-left point">3</span>
                <p class="font-16 cont">键盘控制方块左右移动</p>
              </li>
              <li class="item clearfix">
                <span class="pull-left point">4</span>
                <p class="font-16 cont">满格后消除行、分数和行数增加</p>
              </li>
              <li class="item clearfix">
                <span class="pull-left point">5</span>
                <p class="font-16 cont">如何找到数组中的最大值</p>
              </li>
              <li class="item clearfix">
                <span class="pull-left point">6</span>
                <p class="font-16 cont">扩展冒泡排序</p>
              </li>
              <li class="item clearfix">
                <span class="pull-left point">7</span>
                <p class="font-16 cont">控制游戏状态</p>
              </li>
              <li class="item clearfix">
                <span class="pull-left point">8</span>
                <p class="font-16 cont">实现随机产生所有图形</p>
              </li>
              <li class="item clearfix">
                <span class="pull-left point">9</span>
                <p class="font-16 cont">创建构造方法表示每一种图形的一种旋转状态</p>
              </li>
              <li class="item clearfix">
                <span class="pull-left point">10</span>
                <p class="font-16 cont">控制图形旋转</p>
              </li>
            </ul>
          </div>
        </div>
        <!--本周知识点-->
        <div class="md180411-cj-item">
          <div class="title">
            <img src="http://kidtts.tmooc.cn/script/css/rep/img/w_t01.png" alt="">
          </div>
          <!--知识点-->
          <div class="content">
            <ul class="md180411-cj-info">
              <li class="item clearfix">
                <span class="pull-left point">1</span>
                <p class="font-16 cont">满格后消除行、分数和行数增加</p>
              </li>
              <li class="item clearfix">
                <span class="pull-left point">2</span>
                <p class="font-16 cont">如何找到数组中的最大值</p>
              </li>
              <li class="item clearfix">
                <span class="pull-left point">3</span>
                <p class="font-16 cont">扩展冒泡排序</p>
              </li>
            </ul>
          </div>
        </div>
        <!--学习情况-->
        <div class="md180411-cj-item">
          <div class="title">
            <img src="http://kidtts.tmooc.cn/script/css/rep/img/w_t02.png">
          </div>
          <!-- 学习情况，颜色条 -->
          <div class="content">
            <ul class="md180411-cj-studbar">
              <li class="item">
                <span class="font-16 cont">计算机英语掌握情况</span>
                <div class="bar-bg bar-img w100">
                  <span class="bar-pro">
                      <img class="bar-icon" src="http://kidtts.tmooc.cn/script/css/rep/img/w_jd_05.png">
                  </span>
                </div>
              </li>
              <li class="item">
                <span class="font-16 cont">编程知识点掌握情况</span>
                <div class="bar-bg bar-img w80">
                  <span class="bar-pro">
                      <img class="bar-icon" src="http://kidtts.tmooc.cn/script/css/rep/img/w_jd_04.png">
                  </span>
                </div>
              </li>
              <li class="item">
                <span class="font-16 cont">项目目标实现情况</span>
                <div class="bar-bg bar-img w60">
                  <span class="bar-pro">
                      <img class="bar-icon" src="http://kidtts.tmooc.cn/script/css/rep/img/w_jd_03.png">
                  </span>
                </div>
              </li>
              <li class="item">
                <span class="font-16 cont">亲自出码环节的完成情况</span>
                <div class="bar-bg bar-img w40">
                  <span class="bar-pro">
                      <img class="bar-icon" src="http://kidtts.tmooc.cn/script/css/rep/img/w_jd_02.png">
                  </span>
                </div>
              </li>
              <li class="item">
                <span class="font-16 cont">亲自出码环节的完成情况</span>
                <div class="bar-bg bar-img w20">
                  <span class="bar-pro">
                      <img class="bar-icon" src="http://kidtts.tmooc.cn/script/css/rep/img/w_jd_01.png">
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!--课堂表现-->
        <div class="md180411-cj-item">
          <div class="title">
            <img src="http://kidtts.tmooc.cn/script/css/rep/img/w_t03.png">
          </div>
          <div class="content">
            <div class="md180410-cj-chart">
              <div class="main-tb">
                <div class="inter-sr">
                  <div class="inter-loop"></div>
                  <div class="loop-box">
                    <div class="loop loop-1 level-3"></div>
                  </div>
                  <div class="text-center float-title ft-01 font-16">
                    <img src="http://kidtts.tmooc.cn/script/css/rep/img/md20180410_chart_01.png">
                  </div>
                  <div class="loop-box">
                    <div class="loop loop-2 level-2"></div>
                  </div>
                  <div class="text-center float-title ft-02 font-16">
                    <img src="http://kidtts.tmooc.cn/script/css/rep/img/md20180410_chart_02.png">
                  </div>
                  <div class="loop-box">
                    <div class="loop loop-3 level-1"></div>
                  </div>
                  <div class="text-center float-title ft-03 font-16">
                    <img src="http://kidtts.tmooc.cn/script/css/rep/img/md20180410_chart_03.png">
                  </div>
                  <div class="loop-box">
                    <div class="loop loop-4 level-3"></div>
                  </div>
                  <div class="text-center float-title ft-04 font-16">
                    <img src="http://kidtts.tmooc.cn/script/css/rep/img/md20180410_chart_04.png">
                  </div>
                </div>
              </div>
              <div class="info-title">
                <ul class="clearfix font-16">
                  <li class="item text-right clearfix pull-left">
                    <span class="cont"><span class="icon level-1"></span>有待提高</span>
                  </li>
                  <li class="item text-center clearfix pull-left">
                    <span class="cont"><span class="icon level-2"></span>平均水平</span>
                  </li>
                  <li class="item text-left clearfix pull-left">
                    <span class="cont"><span class="icon level-3"></span>优异表现</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'report',
    data () {
      return {
        stuInfo: null
      }
    },
    created () {
      let self = this
      let grade = self.$route.params.grade
      let name = self.$route.params.name
    }
  }
</script>

<style scoped lang="scss">
  @import "../../css/report/report";
</style>
